BACK
MENU
Mermaid
Alan Hope, 14 May 2023
Mermaid is a javascript library that flexibly formats flow diagrams for the web. This is a difficult task to accomplish—html alone simply can't do this.
The data is in a small text file. Mermaid parses this and outputs the flowdiagram.
flowchart TD
A[(Christmas)]
B{Go
shopping?} C{Take train
to town} D[Warm
jacket] E((iPhone)) F{{fa:fa-car Car}} G[/Stay at
home fa:fa-home /] H(Want to shop
but later) I([Go to
JET5 instead]) A -->|Get money| B A ---->|Get cash| H linkStyle 1 stroke-width:1px,stroke:green; A -->|Eat
too
much| I B --->|Yes| C B -->|No| G C -->|Love tech| E C ==>|Feeling cold| D C --x|Loadsa funds| F H -.->|Time passes| C linkStyle 8 stroke-width:1px,stroke:tomato; G -->|round| I I -->|and round| G subgraph START A B G end style START fill:#efe,stroke:#ded,stroke-width:1px,color:maroon; subgraph SHOPS D F end style SHOPS fill:#fee,stroke:#edd,stroke-width:1px,color:black;
shopping?} C{Take train
to town} D[Warm
jacket] E((iPhone)) F{{fa:fa-car Car}} G[/Stay at
home fa:fa-home /] H(Want to shop
but later) I([Go to
JET5 instead]) A -->|Get money| B A ---->|Get cash| H linkStyle 1 stroke-width:1px,stroke:green; A -->|Eat
too
much| I B --->|Yes| C B -->|No| G C -->|Love tech| E C ==>|Feeling cold| D C --x|Loadsa funds| F H -.->|Time passes| C linkStyle 8 stroke-width:1px,stroke:tomato; G -->|round| I I -->|and round| G subgraph START A B G end style START fill:#efe,stroke:#ded,stroke-width:1px,color:maroon; subgraph SHOPS D F end style SHOPS fill:#fee,stroke:#edd,stroke-width:1px,color:black;